<template>
  <el-card>
    <div class="flex justify-between">
      <el-form style="flex: 1" :inline="true" :model="filterForm">
        <el-form-item>
          <el-input
            v-model="filterForm.order_no"
            :placeholder="$t('搜索订单号')"
            clearable
            style="width: 100%"
            @change="filterList"
          >
            <template #append>
              <el-button icon="Search" @click="filterList" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="filterForm.order_status"
            style="width: 150px"
            clearable
            :placeholder="$t('VA-订单状态')"
            @change="filterList"
          >
            <el-option
              v-for="item in statusList"
              :key="item.key"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            :plain="true"
            class="plainButton"
            type="danger"
            @click="addReceive"
            >{{ $t("新增收款") }}</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" v-loading="loading">
      <template #empty>
        <p class="text-lg">{{ $t("还没有收款记录") }}</p>
      </template>
      <el-table-column
        prop="order_no"
        :label="$t('VA-订单号')"
        align="center"
      />
      <el-table-column prop="status" :label="$t('VA-订单状态')" align="center">
        <template #default="scope">
          <el-tag :type="getStatusName(scope.row.status).type">
            {{ getStatusName(scope.row.status).name }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="amount" :label="$t('收款金额')" align="center" />
      <el-table-column
        prop="create_time"
        :label="$t('创建时间')"
        align="center"
        :formatter="formatterTime"
      />
      <el-table-column
        prop="expire_time"
        :label="$t('到期时间')"
        align="center"
        :formatter="formatterTime"
      />
      <el-table-column
        fixed="right"
        align="center"
        :label="$t('VA-操作')"
        width="120"
      >
        <template #default="scope">
          <el-button
            round
            icon="MoreFilled"
            size="small"
            class="cursor-pointer"
            @click="check(scope.row)"
            >{{ $t("查看") }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="flex justify-center mt-5">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageable.total"
        :default-page-size="pageable.pageSize"
        :default-current-page="pageable.pageNum"
        :page-sizes="[10, 25, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
  <ReceiveDetail
    :isShowReceiveDetail="isShowReceiveDetail"
    :Id="currentId"
    :payStatus="payStatus"
    @close="
      (status) => {
        currentId = '';
        payStatus = status;
        isShowReceiveDetail = false;
      }
    "
  />
  <Receive
    :isShowReceive="isShowReceive"
    @submit="submit"
    @close="
      () => {
        isShowReceive = false;
      }
    "
  />
</template>
<script setup>
import { computed, onMounted, reactive, ref } from "vue";
import { GetVAOrdersPayList } from "@/api/VAAccount";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
import ReceiveDetail from "./components/details.vue";
import Receive from "../accountInfo//components/receive/index.vue";
import { formatterTime } from "@/utils/utils";

const filterForm = reactive({});

const tableData = ref([]);
const loading = ref(false);
// 分页
const pageable = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0,
});

const statusList = computed(() => {
  return [
    { key: 0, name: `${t("未付款")}`, value: 0, type: "success" },
    { key: 1, name: `${t("已付款")}`, value: 1, type: "warning" },
    // { key: 3, name: `${t("超时")}`, value: 3, type: "danger" },
  ];
});

// 订单状态
const getStatusName = (status) => {
  return statusList.value.find((i) => status === i.value);
};

const filterList = () => {
  getVAOrdersPayList();
};

const getVAOrdersPayList = async () => {
  const data = { page: pageable.pageNum, pagesize: pageable.pageSize };
  const params = { ...data, ...filterForm };
  try {
    loading.value = true;
    const { list, page } = await GetVAOrdersPayList(params);
    tableData.value = list || [];
    pageable.total = page?.total_count || 0;
    loading.value = false;
  } catch {
    loading.value = false;
  }
};

const handleCurrentChange = async (number) => {
  pageable.pageNum = number;
  await getVAOrdersPayList();
};
// 条数
const handleSizeChange = (number) => {
  pageable.pageSize = number;
  getVAOrdersPayList();
};

const isShowReceive = ref(false);
const addReceive = () => {
  isShowReceive.value = true;
};
// 展示详情
const isShowReceiveDetail = ref(false);
const currentId = ref("");
const payStatus = ref();
// 查看
const check = async (row) => {
  isShowReceiveDetail.value = true;
  currentId.value = row.order_no || "";
  payStatus.value = row.status;
};

const submit = async () => {
  await getVAOrdersPayList();
};

onMounted(() => {
  getVAOrdersPayList();
});
</script>
